<template>
	<view class="privacy-agreement-container" :class="APP_NAME">
		<u-popup :show="isShowPrivacy" @close="close" :round="10" @open="open">
			<view class="privacy-agreement-popup">
				<view class="title">用户隐私协议保护提示</view>
				<view class="content">
					<view class="text">
						亲爱的用户，感谢您一直以来的支持！为了更好的保护您的权益，同时遵守相关监管要求，请认真阅读《隐私协议》，特向您说明如下：
					</view>
					<view class="text">
						1.为向您积分兑换服务，我们会遵循正当、合法、必要的原则收集和使用必要的信息。
					</view>
					<view class="text">
						2.基于您的授权我们可能会收集和使用您的相关信息，您有权拒绝或取消授权。
					</view>
					<view class="text">
						3.未经您的授权同意，我们不会将您的信息共享给第三方或用于您未授权的其他用途。
					</view>
					<view class="text">
						4.详情信息请您完整阅读
						<text class="agreemment theme-color"
							@click="openPrivacyContract">{{ privacyContractName }}</text>
						<text class="agreemment theme-color" v-for="(item,index) in agreementList" :key="index"
							:data-html="item.html" :data-title="item.title" @click="toDetailPage">《{{item.title}}
							》</text>
					</view>
					<view class="text">
						感谢您的理解与支持！
					</view>
				</view>
				<view class="btn-box">
					<button class="btn" @click="reject">
						拒绝
					</button>
					<!-- <button
						
						id="agree-btn"
						type="default"
						open-type="getPhoneNumber|agreePrivacyAuthorization"
						class="btn agree-btn weui-btn theme-bgc"
						@agreeprivacyauthorization="handleAgree"
						@getphonenumber="handleGetPhoneNumber"
					>
					同意
					</button> -->
					<button id="agree-btn" type="default" class="btn agree-btn weui-btn theme-bgc"
						open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgree">同意</button>

				</view>
			</view>
		</u-popup>
		<u-popup :show="isShowInfo" @close="close" :round="10" @open="open">
			<view class="infoBox">

				<view class="avatarUrl">
					<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						<image :src="avatarUrl" class="refreshIcon" mode="widthFix"></image>
					</button>
				</view>
				<view class="nickname" style="display: flex;flex-direction: row;margin-top: 20rpx;">
					<text class="weui-text">昵称：</text>
					<input type="nickname" class="weui-input" :value="nickName" @blur="bindblur" placeholder="请输入昵称"
						@input="bindinput" />
				</view>

				<button type="primary" @click="save" style="width:710rpx;margin-left: 20rpx;margin-top: 20rpx;">
					保存
				</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	/**
	 * 隐私协议弹窗
	 * */
	export default {
		name: "privacy",
		props: {
			// 是否显示
			isShow: {
				type: Boolean,
				default: false
			},
			// 登录方式
			loginType: {
				type: String,
				default: ''
			}
		},
		watch: {
			isShow(val) {
				if (val) {
					this.getPrivacySetting()
				}
			}
		},
		data() {
			return {
				miniProgramName: undefined,
				privacyContractName: undefined,
				agreementList: [{
						title: '隐私政策',
						src: this.$webViewUrl + '/h5/product_series/yszc.html',
						html: 'yszc'
					},
					{
						title: '用户协议',
						src: this.$webViewUrl + '/h5/product_series/zcxy.html',
						html: 'zcxy'
					}
				],
				isShowInfo: false,
				isShowPrivacy: false,
				avatarUrl: ''
			}
		},
		methods: {
			// 获取是否有需要授权权限
			getPrivacySetting() {
				return new Promise((resolve, reject) => {
					if (wx.getPrivacySetting) {
						wx.getPrivacySetting({
							success: res => {
								console.log(res,
										'-=-=-='
										) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
								if (res.needAuthorization) {
									this.privacyContractName = res.privacyContractName
									this.isShowPrivacy = true
									this.isShowInfo = false
									resolve(true)
									// 需要弹出隐私协议
								} else {
									// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
									this.isShowPrivacy = false
									this.isShowInfo = true
									resolve(false)
								}
							},
							fail: () => {},
							complete: () => {}
						})
					} else {
						// 低版本基础库不支持 wx.getPrivacySetting 接口，隐私接口可以直接调用
						resolve(false)
					}
				})
			},

			openPrivacyContract() {
				wx.openPrivacyContract({
					success: res => {
						console.log('openPrivacyContract success')
					},
					fail: res => {
						console.error('openPrivacyContract fail', res)
					}
				})
			},
			// 同意
			handleAgree() {
				this.close()
				this.isShowInfo = true
			},
			// 拒绝
			reject() {
				this.close()
				this.$emit('triggerEvent', 'reject')
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				// this.isShow = true
			},
			close() {
				console.log(222)
				// this.isShow = false
				this.$emit('handleClose')
				this.isShowPrivacy = false
				this.isShowInfo = false
			},
			toDetailPage(e) {
				let html = e.currentTarget.dataset.html || ''
				let title = e.currentTarget.dataset.title || ''
				let index = this.agreementList.findIndex(item => item.html === html);
				if (index !== -1) {
					uni.navigateTo({
						url: '/pages/webview/webview1?src=' + encodeURIComponent(this.agreementList[index].src)
					})
				}
			},



			//昵称输入框blur
			bindblur(e) {
				console.log('nickName', e)
				this.nickName = e.detail.value;
			},
			//昵称输入框input
			bindinput(e) {
				console.log('nickName', e)
				this.nickName = e.detail.value;
			},
			//选择头像
			onChooseavatar(e) {
				console.log(e.detail);
				this.avatarUrl = e.detail.avatarUrl;
			},
			//保存头像和昵称
			save() {
				//判断输入数据
				if (this.nickName.length < 2) {
					uni.showToast({
						title: "昵称最少两个字",
						icon: "error",
					})
					return false;
				}

				if (this.avatarUrl ==
					'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
				) {
					uni.showToast({
						title: "请选择头像",
						icon: "error",
					})
					return false;
				}
				uni.showLoading({
					title: '加载中'
				});
				let data = {
					nickName: this.nickName,
					avatarUrl: this.avatarUrl
				}
				//保存到线上
				this.$emit('triggerEvent', data)
				this.close()
				// uni.uploadFile({
				// 			url: 'http://api.lhdtest.com/auth/save',
				// 			filePath: this.avatarUrl,
				// 			name: 'file',
				// 			formData: {
				// 				nickname: this.nickName,
				// 			},
				// 			header: {
				// 			},
				// 			success: res => {
				// 				// 注意：这里返回的res.data类型是string  需要自己去转换为JSON
				// 				let data = JSON.parse(res.data);
				// 				if (data.code == 0) {
				// 					//this.avatarUrl = data.data.url;
				// 					uni.showToast({
				// 						title:"保存成功！",
				// 					})
				// 				}
				// 			},
				// 			fail: (error) => {
				// 				uni.showToast({
				// 					title: error,
				// 					duration: 2000
				// 				});
				// 			},
				// 			complete: () => {
				// 				uni.hideLoading();
				// 			}
				// 		});
			},
		}
	}
</script>

<style scoped lang="scss">
	.privacy-agreement-container {
		font-size: 28rpx;

		::v-deep .privacy-agreement-popup {
			background-color: #fff;
			min-height: 50vh;
			padding: 20px 15px;
			box-sizing: border-box;
			border-top-left-radius: 20upx;
			border-top-right-radius: 20upx;

			// overflow-y: auto;
			.title {
				font-weight: 800;
			}

			.content {
				margin-top: 30upx;

				.text {
					font-size: 24upx;
					color: #212121;
					margin-top: 20upx;
				}
			}

			.btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30upx;

				.btn {
					width: 45%;
					height: 70upx;
					font-size: 28upx;
					line-height: 70upx;
					border-radius: 70upx;
					background-color: #fff;
					border: 1px solid #ccc;

					&.agree-btn {
						background-color: #1CC367;
						color: #fff;
						border: 1px solid transparent;
					}
				}
			}
		}
	}

	.infoBox {
		.weui-input {
			border: 1px solid gray;
			border-radius: 10rpx;
			height: 66rpx;
			font-size: 24rpx;
			width: 540rpx;
			margin-left: 10rpx;
			padding-left: 10rpx;
		}

		.weui-text {
			height: 66rpx;
			font-size: 40rpx;
			line-height: 66rpx;
			width: 140rpx;
			margin-left: 20rpx;
		}

		.refreshIcon {
			margin-top: 50rpx;
			width: 160rpx;
		}
	}
</style>